<template>
	<u-navbar :title="title">
		<view slot="left" class="left">
			<u-icon size="50" name="list-dot" @click="handleShow" />
			<view class="tab" @click="show=false" :style="{
					opacity: show ? 1 : 0,
					height: `clac(100vh - ${systemBarHeight})`,
					pointerEvents: show ? '' : 'none'
				}">
				<view class="tabs" :style="{height:show?80*(tabs.length-1)+'rpx':'0'}">
					<template v-for="item in tabs">
						<view v-if="item.name!==active" hover-class="yun-hover" class="tab-item" :key="item.name"
							@click.stop="handleTab(item)">
							{{item.name}}
						</view>
					</template>
				</view>
			</view>
		</view>
	</u-navbar>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		props: {
			title: {
				type: String,
				default: '小管家'
			},
			type:{
				type:String,
				default:'menu'
			},
			active: {
				type:String,
				default:'首页'
			}
		},
		watch: {
		},
		data() {
			return {
				show: false,
				tabs: [
					{
						name: '首页',
						url: '/pages/index/index'
					},
					{
						name: '发现',
						url: '/pages/subpackage/find/index'
					},
					{
						name: '消息中心',
						url: '/pages/subpackage/message/index'
					},
					{
						name: '个人中心',
						url: '/pages/subpackage/user/index'
					},
				]
			}
		},
		computed: {
			...mapGetters('plugins', [
				'systemBarHeight'
			])
		},
		mounted() {
			this.getHeightInfo()
		},
		methods: {
			// 左上角的显示菜单按钮
			handleShow() {
				this.show = !this.show
			},
			// 点击菜单
			handleTab(item) {
				uni.navigateTo({
					url: item.url
				});
				this.show = false
			},
			getHeightInfo() {
				if (!this.systemBarHeight) {
					this.$store.dispatch('plugins/getSystemBarHeight')
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.left {
		cursor: pointer;

		.tab {
			background: $uni-bg-color-mask;
			position: fixed;
			width: 100vw;
			left: 0;
			height: 100vh;
			z-index: 99999;
			transition-duration: 0.3s;
		}

		.tabs {
			position: absolute;
			left: 0;
			width: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			overflow: hidden;
			transition-duration: 0.3s;
			z-index: 999999;
			// transition: background 1ms,zIndes 0ms,height 0.4s ease !important;

			.tab-item {
				padding: 0 30rpx;
			}
		}
	}
</style>